<template>
<!-- 首页的最近更新模块 -->
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span style="font-weight: bold;font-size: 20px">最近更新</span>
      <!--<el-button style="float: right; padding: 3px 0" type="text">修改</el-button>-->
    </div>
    <div class="block">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in fromData"
          :key="index"
          placement="top">
           <el-card>
            <h4>{{activity.newContent}}</h4>
            <p>{{activity.username}} 提交于 {{activity.createTime}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>

     <div style="margin: 20px 0 50px 0">
        <el-pagination
          background
          style="float:right;"
          layout="total, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          :total="total"
        ></el-pagination>
      </div>

  </el-card>
</template>

<script>
  export default {
    name: 'UpdateCard',
    data () {
    return {
      fromData: [],
      pageSize: 5,
      total: 0
    }
  },
  mounted () {
    this.loadNews()
  },
  methods: {
    loadNews () {
      var _this = this
      this.$axios.post('/newsIndex/' + this.pageSize + '/1').then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.fromData = resp.data.result.content
          _this.total = resp.data.result.totalElements
        } else {
          // 从后端返回错误信息
            this.$alert('<p style=" color:#F00;">' + resp.data.message + '</p>', '错误提示', {
              dangerouslyUseHTMLString: true
            })
        }
      })
    },
    handleCurrentChange (page) {
      var _this = this
      this.$axios.post('/newsIndex/' + this.pageSize + '/' + page + '/').then((resp) => {
        if (resp && resp.data.code === 200) {
          _this.fromData = resp.data.result.content
          _this.total = resp.data.result.totalElements
        } else {
          // 从后端返回错误信息
            this.$alert('<p style=" color:#F00;">' + resp.data.message + '</p>', '错误提示', {
              dangerouslyUseHTMLString: true
            })
        }
      })
    }
  }

  }
</script>

<style scoped>
  .box-card {
    margin-top: 5px;
    width: 988px;
    height: 1050px;
    text-align: left;
  }
</style>
